<template>
  <view class="login-container">
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <view class="captcha-container">
      <input type="text" v-model="captchaCode" placeholder="请输入验证码" />
      <image :src="captchaImage" @click="refreshCaptcha" />
    </view>
    <button @click="handleLogin">登录</button>
    <view v-if="errorMessage" class="error">{{ errorMessage }}</view>
  </view>
</template>
<script>
import request from '@/utils/request2.uts'; // 导入 request 方法

export default {
  data() {
    return {
      username: '',       // 用户名
      password: '',       // 密码
      captchaCode: '',    // 用户输入的验证码
      captchaImage: '',   // 验证码图片 URL
      captchaId: '',      // 验证码标识
      errorMessage: '' ,// 错误信息提示
    };
  },
  methods: {
    // 获取验证码图片
    async fetchCaptcha() {
      try {
        const res = await request({
          url: '/login/getCaptcha', // 替换为你的后端验证码接口地址
          method: 'GET'
        });
        if (res.data.code === 0) {
          this.captchaImage = res.data.data.captchaBase64Image; // 验证码图片 URL
          this.captchaId = res.data.data.captchaUuid; // 验证码标识
        } else {
          this.errorMessage = '获取验证码失败，请重试';
        }
      } catch (err) {
        console.error('获取验证码失败:', err);
        this.errorMessage = '网络错误，请检查您的网络连接';
      }
    },

    // 刷新验证码
    refreshCaptcha() {
      this.fetchCaptcha();
    },

    // 登录逻辑
    handleLogin() {
      if (!this.username || !this.password || !this.captchaCode) {
        this.errorMessage = '请填写所有字段';
        return;
      }

      // 调用后端登录接口
      request({
        url: '/login',
        method: 'POST',
        data: {
          loginName: this.username,
          password: this.password,
          captchaCode: this.captchaCode,
          captchaUuid: this.captchaId,
          loginDevice: 1,
        },
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.data.success) {
            // 登录成功，保存 token 并跳转到首页
            const token = res.data.token;
            uni.setStorageSync('token', token);
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            uni.switchTab({ url: '/pages/home/index' });
          } else {
            // 登录失败，显示错误信息
            this.errorMessage = res.data.message || '登录失败，请重试';
            this.refreshCaptcha(); // 刷新验证码
          }
        },
        fail: (err) => {
          console.error('登录接口调用失败:', err);
          this.errorMessage = '网络错误，请检查您的网络连接';
        }
      });
    }
  },
  mounted() {
    // 页面加载时获取验证码
    this.fetchCaptcha();
  }
};
</script>
<style>
.login-container {
  padding: 20px;
  text-align: center;
}
input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
.captcha-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.captcha-container input {
  width: 60%;
}
.captcha-container image {
  width: 30%;
  height: 40px;
  cursor: pointer;
}
button {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
.error {
  color: red;
  margin-top: 10px;
}
</style>
